<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>登录页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="screen-orientation" content="portrait" />
    <link rel="stylesheet" href="/Resources/css/app.css">
    <link rel="stylesheet" href="/Resources/css/login.css">


</head>

<body>
    <div class="login">
        <div class="logo">
            <img alt="" src="/Resources/images/logo.png" />

        </div>
        <ul class="login-list">
            <li>
                <input type="text" placeholder="请输入手机号" />

                <i class="icon icon-person">
                </i>
            </li>
            <li>
                <input type="text" placeholder="请输入图片验证码" />

                <i class="icon icon-char">
                </i>
                <img src="/Resources/images/yzm.png" alt="" class="yzm" />
            </li>
            <li>
                <input type="text" placeholder="请输入短信验证码" />
                <i class="icon icon-number">
                </i>
                <button class="getnumber">
                    获取验证码
                </button>
            </li>
        </ul>
        <div class="btn-login">
            <button class="active">
                登录
            </button>
        </div>

        <div class="layer" style="display: none">
            请输入手机号
        </div>

    </div>
    <script src="/Resources/js/zepto.js"></script>
    <script>
        var ow = document.documentElement.clientWidth;
         if(ow>540){
            ow=540
        }
        window.document.documentElement.style.fontSize = 5 * ow / 16 + "px";
        //获取验证码
        $(document).on('click', '.getnumber', function() {
            var num = 30;
            $(this).attr('disabled', 'true')
            $(this).css('background', '#ddd')
            $(this).html(num + '（S）');
            var that = $(this)
            var timer = setInterval(function() {

                num--;
                // that.html(num);
                if (num == 0) {
                    clearInterval(timer);
                    that.css('background', '#C7181E')
                    that.html('获取验证码')
                    that.removeAttr('disabled')

                } else {
                    that.attr('disabled', 'true')
                    that.css('background', '#ddd')
                    that.html(num + '（S）')

                }
            }, 1000)
        })

        // 点击登录显示弹层提示
        $(document).on('click', '.btn-login button', function() {
            $('.layer').show();
            setTimeout(function() {
                $('.layer').hide();
            }, 2000)

        })
    </script>
</body>

</html>
